<!--
 * @FileDescription: 员工轨迹-20220605
 * @Author: luyaj
 * @Date: 2021-12-29 21:04:37
 * @LastEditors: luyaj
 * @LastEditTime: 2022-06-07 09:26:53
-->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="员工">
              <j-search-select-tag placeholder="请选择员工" v-model="queryParam.fitterId" :dictOptions="staffList" />
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="12">
            <a-form-item label="时间">
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" class="query-group-cust" v-model="queryParam.createTimeBegin"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" class="query-group-cust" v-model="queryParam.createTimeEnd"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="播放速度">
              <a-select v-model="queryParam.speed" placeholder="请选择播放速度">
                <a-select-option v-for="item in speedList" :key="item.value">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 地图 -->
    <div id="container"></div>
    <div class="input-card">
      <h4>轨迹回放控制</h4>
      <div class="input-item">
        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation" :disabled="!result" />
        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation" />
      </div>
      <div class="input-item">
        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation" />
        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation" />
      </div>
    </div>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { getAction } from '@/api/manage'

  export default {
    name: 'customerMap',
    mixins:[mixinDevice],
    data () {
      return {
        description: '客户分布地图管理页面',
        queryParam: {
          fitterId: undefined,
          speed: '200'
        },
        staffList: [],
        result: [],
        lineArr: [],
        map: null,
        marker: null,
        polyline: null,
        passedPolyline: null,
        speedList: [
          { name: '快', value: '200' },
          { name: '中', value: '1000' },
          { name: '慢', value: '2000' },
        ],
        url: {
          queryLocationUrl: "/web/bizOrderSite/queryLocation",
          staffUrl: "/sys/user/queryAll"
        },
      }
    },
    methods: {
      loadMap() {
        this.map = new AMap.Map('container', {
          zoom: 10
        });
      },
      drawLine() {
        let _this = this
        AMap.plugin('AMap.MoveAnimation', function(){
          _this.marker = new AMap.Marker({
            map: _this.map,
            position: _this.lineArr[0],
            icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle: -90,
          });

          _this.map.setFitView();

          // 绘制轨迹
          _this.polyline = new AMap.Polyline({
            map: _this.map,
            path: _this.lineArr,
            showDir: true,
            strokeColor: "#28F", // 线颜色
            strokeWeight: 6, // 线宽
          });

          _this.passedPolyline = new AMap.Polyline({
            map: _this.map,
            strokeColor: "#AF5", // 线颜色
            strokeWeight: 6, // 线宽
          });

          _this.marker.on('moving', function (e) {
            _this.passedPolyline.setPath(e.passedPath);
            _this.map.setCenter(e.target.getPosition(),true)
          });
        })
      },
      startAnimation () {
        this.marker.moveAlong(this.lineArr, {
          // 每一段的时长
          duration: this.queryParam.speed,//可根据实际采集时间间隔设置
          // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
          autoRotation: true,
        });
      },
      pauseAnimation () {
        this.marker.pauseMove();
      },
      resumeAnimation () {
        this.marker.resumeMove();
      },
      stopAnimation () {
        this.marker.stopMove();
      },
      /** 员工 */
      querySatff() {
        getAction(this.url.staffUrl).then(res => {
          if (res.success) {
            this.staffList = res.result.map(v => {
              return {
                text: v.realname,
                value: v.id
              }
            })
          }
        })
      },
      searchQuery() {
        if (this.marker) {
          this.map.remove(this.marker);
          this.map.remove(this.polyline);
          this.map.remove(this.passedPolyline);
        }
        getAction(this.url.queryLocationUrl, this.queryParam).then(res => {
          if (res.success) {
            this.result = res.result
            // 如果有数据，就描点
            if (res.result.length) {
              let arr = []
              res.result.forEach(v => {
                arr.push(v.map(Number))
              })
              this.lineArr = arr
              this.drawLine()
            }
          }
        })
      },
      searchReset() {
        this.queryParam = {
          fitterId: undefined,
          speed: '200'
        }
      }
    },
    mounted() {
      this.loadMap()
      this.searchQuery()
      this.querySatff()
    }
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';
  #container {
    height: calc(100vh - 59px - 52px - 75px);
    width: calc(100vw - 208px - 76px);
    .amap-icon img{
      width: 25px;
      height: 34px;
    }
  }
  .input-card {
    left: calc(208px + 40px );
    bottom: 40px;
    .btn{
      margin-right: 1.2rem;
      width: 9rem;
    }
  } 
  .input-card .btn:last-child{
    margin-right: 0;
  }
</style>